<template>
<div style="background: #f5f5f5;padding-bottom:20px;height:100%">
    <table></table>
    <div class="article" :class="{articleLoading:articleContent==''}" v-loading="articleContent.title == ''">
        <!-- 文章标题 -->
        <div class="caption">{{articleContent.title}}</div>
        <!-- 文章发布时间 -->
        <div class="caption-sub"> <span>发布：{{articleContent.publishTime}}</span><span style="margin-left:20px;">更新：{{articleContent.updateTime}}</span></div>
        <!-- 文章内容 -->
        <article v-html="articleContent.content" />
        <!-- 回到顶部 -->
        <el-backtop :right="300" :bottom="200">
            <i class="el-icon-top"></i>
        </el-backtop>
    </div>
</div>
</template>
<style scoped>
/* 正常文章显示区域 */
    .article {
        width: 55%;
        /* height: 500px; */
        margin: 50px auto;
        background: #fff;
        padding: 30px;
        box-shadow: 0 1px 2px #c1c1c1;
        font-size: 16px;
        line-height: 31px;
        position: relative;
    }
/* 加载中文章显示区域 */
    .articleLoading {
        height: 600px;
    }
    .caption {
        font-size: 24px;
        color: #333;
    }
    .caption-sub {
        margin-top: 12px;
        padding-bottom: 12px;
        border-bottom:#e6e6e6 solid 1px;
        color: #999;
        font-size: 14px;
    }
    
    /* 修改文章渲染的样式 */
    article >>> p {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 31px;
        color: #333;
        text-indent: 30px;
    }
    article >>> img {
        display: block;
        margin: 0 auto;
        max-width: 100%; 
        width: auto; 
        height: auto;
    }

    .arrow {
        border: 1px solid red;
        position: absolute;
        left: 100px;
    }
</style>
<script>
export default {
    data(){
        return {
             //文章内容对象
            articleContent: {
                title:'',
                publishTime: '',
                updateTime: '',
                content: ''
            }, 
            
        }
    },
    created() {
        let article_id = this.$route.query.article_id; 
        this.$api.articleApi(article_id).then(res => {
            console.log(res.data)
            let {title, publishTime, updateTime, content} = res.data.data;
            this.articleContent = {
                title,content,
                publishTime: this.renderTime(publishTime),
                updateTime: this.renderTime(updateTime)
            }
        })
    },
    methods: {
        //处理时间
        renderTime(date) {
            var dateee = new Date(date).toJSON();
            return new Date(new Date(dateee) - 6 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 
        },
        mounted() {
            
        }
    }

}
</script>